<template>
  <div class="my-table-toolbar" :class="classes">
    <div class="my-table-toolbar__title">
      <slot name="title">{{title}}</slot>
    </div>
    <div class="my-table-toolbar__actions">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: String,
      size: String
    },
    computed: {
      classes() {
        return {
          [`my-table-toolbar--${this.size}`]: !!this.size
        }
      }
    }
  }
</script>
<style>
.my-table-toolbar {
  height: 40px;
  line-height: 40px;
  position: relative;
  margin-bottom: 12px;
  padding: 0 10px;
}

.my-table-toolbar__title {
  font-size: 1.28571rem;
  padding: 0
}

.my-table-toolbar__actions {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1
}

.my-table-toolbar--medium {
  height: 36px;
  line-height: 36px
}

.my-table-toolbar--small {
  height: 32px;
  line-height: 32px
}

.my-table-toolbar--mini {
  height: 28px;
  line-height: 28px
}
</style>
